<template>
  <div ref="chart"></div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue'
import * as echarts from 'echarts'
import { get_Stipend } from '../../../../api/api';

const props = defineProps({
  selectedStudentId: {
    type: Number,
    required: false,
    default: 1,
  },
});

// 监听 selectedStudentId 的变化并调用 fetchData
watch(() => props.selectedStudentId, (newValue) => {
  if (newValue) {
    fetchData(newValue); // 传递 newValue 到 fetchData
  }
});

// 获取 token
const getToken = () => {
  return localStorage.getItem('pz_token');
};

// 请求数据并更新状态
const fetchData = async (StudentID) => {
  try {
    const token = getToken();

    if (!token) {
      console.error('未找到 Token');
      return;
    }

    if (!StudentID) {
      console.error('无效的 StudentID:', StudentID);
      return;
    }

    // 设置请求头
    const headers = {
      'Authorization': `JWT ${token}`, // 将 token 作为 Bearer Token 传递
    };

    const response = await get_Stipend(StudentID, headers);

    const Stipend = response.data.data.data; // 这里获取实际的返回数据

    console.log('Stipend:', Stipend);  // 打印 的结构

    // 从 sourseNumberData 中提取学年和门数数据
    const Amount = Stipend.map(item => item.Amount);
    const Semester = Stipend.map(item => item.Semester);

    // 更新 ECharts 的配置
    option.xAxis[0].data = Semester;
    option.series[0].data = Amount;
    option.series[1].data = Amount;
    option.series[3].data = Amount;


    const myChart = echarts.init(chart.value)
    myChart.setOption(option)
    window.addEventListener('resize', () => {
      myChart.resize()
    })
  } catch (error) {
    console.error('获取数据失败:', error);
  }
};

const chart = ref();
const option = reactive({
  animation: true,
  grid: {
    top: "5%",
    bottom: "15%",
    right: "0%",
    left: "8%"
  },
  xAxis: [{
    data: ['大一上', '大一下', '大二上', '大二下', '大三上', '大三下'],
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: "rgba(77, 128, 254, 0.2)",
        width: 2
      }
    },
    axisLabel: {
      show: true,
      margin: 14,
      fontSize: 11,
      color: "#65D5FF"
    }
  }],
  yAxis: [
    {
      type: "value",
      gridIndex: 0,
      min: 1000,
      max: 8000,
      interval: 1000,
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(77, 128, 254, 0.2)",
          width: 2
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(77, 128, 254, 0.2)"
        }
      },
      axisLabel: {
        show: true,
        margin: 14,
        fontSize: 10,
        color: "#65D5FF"
      }
    }
  ],
  series: [
    {
      name: "设备在线率",
      type: "bar",
      barWidth: 16,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(146, 225, 255, 1)" },
          { offset: 1, color: "rgba(0, 151, 251, 1)" }
        ])
      },
      data: [21, 43, 56, 32, 64, 12],
      z: 10,
      zlevel: 0
    },
    {
      type: "pictorialBar",
      itemStyle: {
        color: "#0F375F"
      },
      symbolRepeat: "fixed",
      symbolMargin: 6,
      symbol: "rect",
      symbolClip: true,
      symbolSize: [18, 2],
      symbolPosition: "start",
      symbolOffset: [1, 1],
      data: [21, 43, 56, 32, 64, 12],
      width: 2,
      z: 0,
      zlevel: 1
    },
    {
      name: "外框",
      type: "bar",
      barGap: "-110%",
      data: [100, 100, 100, 100, 100, 100, 100],
      barWidth: 16,
      itemStyle: {
        color: "transparent"
      },
      z: 0
    },
    {
      name: "背影",
      type: "line",
      smooth: true,
      showAllSymbol: false,
      symbolSize: 0,
      lineStyle: {
        width: 0
      },
      areaStyle: {
        color: "rgba(0, 151, 251, 0.1)"
      },
      data: [21, 43, 56, 32, 64, 12],
      z: 5
    }
  ],
  dataZoom: [
    {
      type: "slider",
      show: false,
      xAxisIndex: [0],
      endValue: 5,
      startValue: 0
    }
  ]
});

onMounted(() => {
  const myChart = echarts.init(chart.value);
  myChart.setOption(option);

  const resizeHandler = () => {
    myChart.resize();
  };

  window.addEventListener('resize', resizeHandler);

  onUnmounted(() => {
    window.removeEventListener('resize', resizeHandler);
  });
});
</script>

<style lang="less" scoped>
.chart-container {
  width: 100%;
  height: 400px;
}
</style>